import cs from './ColorCard.module.scss';

const list = [
  { id: 1, title: 'Наблюдается пищевой интерес: ребенок пытается взять что-то со стола, тянет все в рот' },
  { id: 2, title: 'Пытается сидеть сам или с поддержкой' },
  { id: 3, title: 'Угасает рефлекс выталкивания ложки языком' },
  { id: 4, title: 'Ему уже исполнилось 4 месяца' },
];

const Dot = () => (
  <svg fill="none" height="6" viewBox="0 0 6 6" width="6" xmlns="http://www.w3.org/2000/svg">
    <circle cx="3" cy="3" fill="white" r="3" />
  </svg>
);
export const ColorCard = () => (
  <div className={cs.container}>
    <h2 className={cs.title}>Внешние признаки готовности ребенка к прикорму</h2>
    <ul className={cs.card}>
      {list.map(({ id, title }) => (
        <li className={cs.item} key={id}>
          <Dot /> <span>{title}</span>
        </li>
      ))}
    </ul>
  </div>
);
